<template>
  <!-- eslint-disable -->
  <div id="main-content" class="address-box" >
    <Scroll ref="scroll" class="address-list" @infiniteScroll="getAddress">
      <div
        v-for="(item, index) in addressList"
        :key="index"
        :class="['address-item', item.defaultStatus === 1 ? 'active' : null]"
        @click="selectAddress(item)"
      >
        <div class="checked">
          <i class="icon-checked"></i>
        </div>
        <div class="info-box">
          <div class="name-mobile">
            <span>{{item.consignee}}</span>
            <span>{{item.mobile}}</span>
          </div>
          <div class="address-info">
            <span>{{item.detailedAddress}}</span>
          </div>
        </div>
      </div>
    </Scroll>
    <div class="noList" v-if="emptyList">暂无地址</div>
  </div>
</template>
<script>
import Ajax from "@/mixins/ajax";
import { Scroll } from "~/vScroll";

// 获取收货地址列表
const getAddressListUrl = "/card-service-web/address/queryAddressList";
// 更新地址
// const updateAddressUrl = "/card-service-web/resell/updateAddress";

export default {
  name: "Address",
  mixins: [Ajax],
  components: {
    Scroll
  },
  data() {
    return {
      busy: false,
      addressList: [],
      // 空列表？
      emptyList: false
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getAddress();
    });
  },
  methods: {
    /**
     * 获取地址列表
     */
    getAddress() {
      const params = {
        /* eslint-disable */
        pageNo: ++this.currentPageNo,
        pageSize: 10
      };
      this.post(getAddressListUrl, params).then(body => {
        if (body.execDatas.length === 0) {
          --this.currentPageNo;
        } else {
          this.addressList = this.addressList.concat(body.execDatas);
          // 更新IScroll尺寸
          this.$nextTick(() => {
            this.$refs.scroll.refresh();
          });
        }
        if (this.addressList.length === 0) {
          this.emptyList = true;
        }
      });
    },
    selectAddress(item) {
      sessionStorage.setItem("peop", item.consignee);
      sessionStorage.setItem("tel", item.mobile);
      sessionStorage.setItem("address", item.detailedAddress);
      sessionStorage.setItem("addressId", item.addressId);
      console.log(this.$route.query.fullPath)
      this.$router.replace({ name: 'MakeSureOrder', query: { addressId: item.addressId }});
     // router.push()
    }
  }
};
</script>

<style scoped>
.noList {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.address-box {
  position: absolute;
  top: 1.5rem;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  background: #fff;
  overflow-y: scroll;
  overflow-x: hidden;
}
.address-item {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  padding: 0.47rem 0.5rem 0.47rem 0.29rem;
  -webkit-box-shadow: 0px 0.02rem 0px 0px #c8c7cc;
  box-shadow: 0px 0.02rem 0px 0px #c8c7cc;
  min-height: 1.7rem;
}
.address-item:last-child {
  margin-bottom: 1.5rem;
}
.address-item.active {
  background: #f6f6f6;
}
.address-item .info-box {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.address-item .name-mobile {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  font-size: 0.51rem;
  margin-bottom: 0.3rem;
}
.address-item .address-info {
  font-size: 0.42rem;
  color: #8e8e8e;
}
.address-item .checked {
  width: 0.38rem;
  min-height: 0.39rem;
  margin-right: 0.57rem;
  -webkit-align-self: center;
  align-self: center;
}
.address-item .checked .icon-checked {
  display: inline-block;
  width: 0.38rem;
  height: 0.39rem;
}
.address-item.active .checked .icon-checked {
  display: inline-block;
  width: 0.38rem;
  height: 0.39rem;
  background: url("../../assets/img/address_checked.png") no-repeat;
  background-size: 100%;
}
</style>

